<template>
  <el-image :src="props.url" :fit="fit" :lazy="props.lazy" :style="`width:${wd};height:${hg}`">
    <!-- 图片加载中的样式 -->
    <template #placeholder>
      <div class="image-slot">Loading<span class="dot">...</span></div>
    </template>
    <!-- 图片加载失败的样式 -->
    <template #error>
      <div class="image-slot">加载失败</div>
    </template>
  </el-image> 
</template>

<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue';
const props: any = defineProps({
  wd: {
    type: String,
    default: '100%',
  },
  hg: {
    type: String,
    default: '100%',
  },
  errImage: {
    //错误的Image图片
    type: String,
    default: '',
  },
  url: {
    //图片地址路径
    type: String,
    default: '',
  },
  fit: {
    //图片展示格式
    type: String,
    default: 'cover', //'fill','contain', 'cover','none','scale-down',
  },
  lazy: {
    type: Boolean,
    default: true,
  },
});
</script>

<style lang="scss" scoped>
.image-slot {
  width: 95%;
  height: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 14px;
  color: var(--el-color-primary);
  img {
    object-fit: cover;
  }
}

// Your scoped styles here
</style>
